<template>
  <div class="main">
    <div class="title">欢迎登录后台管理系统</div>
    <div>
      <el-input v-model="loginInfo.username" placeholder="请输入账号" clearable></el-input>
    </div>
    <div>
      <el-input v-model="loginInfo.password" type="password" placeholder="请输入密码" clearable></el-input>
    </div>
    <div>
      <el-button type="primary" style="width:100px" @click="login">
        登录
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginInfo: {
        username: '',
        password: '',
      }
    }
  },
  methods: {
    login() {
      if (!this.loginInfo.username) {
        this.$message('请输入账号')
        return
      }
      if (!this.loginInfo.password) {
        this.$message('请输入密码')
        return
      }
      this.$axios.post('/users/backend/login', { username: this.loginInfo.username, password: this.loginInfo.password }).then((res) => {
        if (res.data.code === 1) {
          this.$message(res.data.message)
          sessionStorage.setItem('userInfo', JSON.stringify(res.data.user))
          sessionStorage.setItem('token', res.data.token)
          this.$router.push('/users')
        } else {
          this.$message(res.data.message)
        }
      })
        .catch(() => {
          this.$message('登录失败')
        })
    },
  },
}
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:20px;
}

.title {
  color: #333;
  font-size: 25px;
  font-weight: 600;
}

.label {
  margin-bottom: 10px;
}

.codebox {
  display: flex;
  gap: 12px;
}
</style>